<template>
	<cl-view-group ref="ViewGroup">
		<template #item-name="{ item }"> {{ item.name }} </template>

		<template #right>
			<cl-crud ref="Crud">
				<cl-row>
					<!-- 刷新按钮 -->
					<cl-refresh-btn />
					<!-- 新增按钮 -->
					<cl-add-btn />
					<!-- 批量删除 -->
					<cl-multi-delete-btn />
					<cl-flex1 />
					<!-- 关键字搜索 -->
					<cl-search-key placeholder="搜索名称" />
        </cl-row>
				<cl-row>
					<!-- 数据表格 -->
					<cl-table ref="Table" row-key="id" @row-click="onRowClick">
						<template #slot-btn="{ scope }">
							<el-button
								text
								bg
								type="success"
								v-permission="service.crawler.config.permission.add"
								@click="append(scope.row)"
							>新增</el-button
							>
						</template>
					</cl-table>
				</cl-row>
				<cl-row>
					<cl-flex1 />
					<cl-pagination />
				</cl-row>
				<!-- 新增、编辑 -->
				<cl-upsert ref="Upsert" />
			</cl-crud>
		</template>
	</cl-view-group>
</template>

<script lang="ts" name="crawler-config" setup>
import { useCool } from "/@/cool";
import { setFocus, useCrud, useTable, useUpsert } from "@cool-vue/crud";
import { useViewGroup } from "/#/view";

const { service } = useCool();

const { ViewGroup } = useViewGroup({
	label: "采集组",
	title: "采集配置",
	service: service.crawler.group,
	onSelect(item) {
		refresh({
			groupId: item.id,
			page: 1
		});
	},
	onEdit() {
		return {
			width: "800px",
			props: {
				labelWidth: "60px"
			},
			items: [
				{
					prop: "enName",
					label: "英文描述",
					span: 12,
					required: true,
					component: {
						name: "el-input"
					}
				},
				{
					prop: "name",
					label: "中文描述",
					span: 12,
					required: true,
					component: {
						name: "el-input"
					}
				}
			]
		};
	}
});

// cl-upsert
const Upsert = useUpsert({
	dialog: {
		width: "800px"
	},

	items: [
		{
			prop: "name",
			label: "爬虫名称",
			required: true,
			component: {
				name: "el-input"
			}
		},
		{
			prop: "brief",
			label: "简介",
			component: {
				name: "el-input",
				props: {
					type: "textarea",
					rows: 4
				}
			}
		},
		{
			prop: "status",
			label: "状态",
			span: 12,
			component: {
				name: "cl-switch"
			}
		},
		{
			prop: "threadCounts",
			label: "并发线程数",
			span: 12,
			component: {
				name: "el-input"
			}
		},
		{
			prop: "crawlerRef",
			label: "爬虫编码",
			required: true,
			span: 12,
			component: {
				name: "el-input"
			}
		},
		{
			prop: "crawlerPageParserRef",
			label: "处理器",
			required: true,
			span: 12,
			component: {
				name: "el-input"
			}
		},
		{
			prop: "targetUrls",
			label: "目标地址",
			required: true,
			component: {
				name: "el-input",
				props: {
					type: "textarea",
					rows: 4
				}
			}
		},
		{
			prop: "whiteUrlRegexs",
			label: "地址白名单",
			required: true,
			component: {
				name: "el-input",
				props: {
					type: "textarea",
					rows: 4
				}
			}
		}
	],
	onSubmit(data, { next }) {
		next({
			...data,
			groupId: ViewGroup.value?.selected?.id
		});
	},
	plugins: [setFocus("name")]
});

// cl-table
const Table = useTable({
	contextMenu: ["refresh"],
	columns: [
		{ type: "selection" },
		{
			prop: "crawlerRef",
			label: "爬虫编码",
			width: 180,
			align: "left",
			showOverflowTooltip: true
		},
		{
			prop: "crawlerPageParserRef",
			label: "爬虫处理器编码",
			width: 180,
			align: "left",
			showOverflowTooltip: true
		},
		{
			prop: "name",
			label: "爬虫名称",
			align: "left",
			width: 180
		},
		{
			prop: "brief",
			label: "简介",
			align: "left",
			width: 180
		},
		{
			prop: "targetUrls",
			label: "目标地址",
			width: 180,
			align: "left",
			showOverflowTooltip: true
		},
		{
			prop: "whiteUrlRegexs",
			label: "地址白名单",
			width: 180,
			align: "left",
			showOverflowTooltip: true
		},
		{
			prop: "status",
			label: "状态",
			component: {
				name: "cl-switch",
				modelValue: "status"
			},
			align: "left",
			width: 100
		},
		{
			prop: "threadCounts",
			label: "并发线程数",
			align: "left",
			width: 100
		},
		// {
		// 	prop: "createdAt",
		// 	label: "创建时间",
		// 	align: "left",
		// 	sortable: "desc"
		// },
		// { label: "更新时间", prop: "updatedAt", sortable: "custom" },
		{
			label: "操作",
			type: "op",
			width: 180,
			buttons: ["edit", "delete"]
		}
	]
});

// cl-crud
const Crud = useCrud({
	service: service.crawler.config,
	onRefresh(params, { render }) {
		// console.log(JSON.stringify(params));
		service.crawler.config
			.page({
				...params
			})
			.then((res) => {
				// 渲染数据
				// console.log(JSON.stringify(res));
				render(res["list"], {
					size: Number(res["pagination"].size),
					page: Number(res["pagination"].page),
					total: Number(res["pagination"].total)
				});
			});
	}
});
// 刷新
function refresh(params?: any) {
	// console.log(JSON.stringify(params));
	Crud.value?.refresh(params);
}

// 行点击展开
function onRowClick(row: any, column: any) {
	if (column?.property && row.children) {
		Table.value?.toggleRowExpansion(row);
	}
}

// 追加子集
function append(row: any) {
	Crud.value?.rowAppend({
		parentId: row.id,
		orderNum: 1
	});
}
</script>
